<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>自我介绍</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
</head>
<style>
    .supplyrelease .reg-form1 .w100 {
        border: none;
        padding: 0;
        margin-bottom: 0;
    }

    .uploadtp {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 30px;
    }

    .imgsm1 i {
        font-size: 40px;
    }

    [v-cloak] {
        display: block;
    }

    .xztp {
        margin-left: 20px;
    }

    input:focus {
        color: #087BFF !important;
    }

    .shoptitle {
        color: #087BFF;
    }

    #box {
        background: #ffffff;
        height: 106px;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: -106px;
        -webkit-transform: translate3d(0px, -106px, 0px);
        -moz-transform: translate3d(0px, -106px, 0px);
        transform: translate3d(0px, -106px, 0px);
        transition: all 0.3s;
        visibility: hidden;
    }

    #box a {
        display: block;
        width: 100%;
        text-align: center;
        height: 40px;
        background: #fff;
        color: #333;
        line-height: 40px;
        border-bottom: 1px solid #ebebeb;
        font-size: 16px;
        position: relative;
        margin-bottom: 6px;
    }

    .btn {
        margin-top: 0.1rem;
        margin-bottom: 2rem;
        text-align: center
    }

    .btn button {
        width: 90%;
        outline: none;
        border: none;
        background: #009bdb;
        color: #fff;
        height: 40px;
        display: inline-block;
        border-radius: 0.4rem;
        font-size: 16px;
    }

    .sharerelease .share-content {
        margin: 20px auto;
        width: 100%;
        height: auto;
        border-right: 0;
        border-left: 0;
        padding: 0;
        position: relative;
        background: #fff;

    }

    .sharerelease .share-content i {
        position: absolute;
        right: 10px;
        bottom: 0;
        font-style: normal;
        color: #777777;
    }

    .sharerelease .share-content span {
        margin-left: 20px;
    }

    .sharerelease .share-contents {
        border: none;
        width: 100%;
        height: 120px;
        margin-top: 0;
    }

    #wrap {
        background: #f0f0f0;
    }
</style>
<body>
<div v-cloak id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>
            <li class="active">
                <i onclick="back()" class="icon iconfont icon-back"></i>
                <span>自我介绍</span>
                <em class="right" @click="sub">保存</em>
            </li>
        </ul>
    </header>
    <div class="sharerelease fixed-header">
        <div>

            <div class="reg_xx">
                <div class="reg_xx_item" @click="setpurpose">
                    <div class="reg_xx_iteml">
                        <span>约会目的</span>
                    </div>
                    <div class="reg_xx_itemr">
                        <span>{{bio}}</span>
                        <i class="icon iconfont icon-right"></i>
                    </div>
                </div>
            </div>
<!--            <div class="reg-form">-->
<!--                <div class="share-content">-->
<!--                    <textarea maxlength="300" @input="descInput" name="" id="" v-model="bio" class="share-contents"-->
<!--                              placeholder="上天给我一个杠杆，我就能撬动地球。"></textarea>-->
<!--                    <i>{{remnant}}/300</i>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</div>
</body>

</html>
<script src="../../script/mui.min.js"></script>
<script src="../../script/mui.picker.js"></script>
<script src="../../script/mui.poppicker.js"></script>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script>
    apiready = function () {
        api.addEventListener({
            name: 'online'
        }, function (ret, err) {
        });
        api.addEventListener({
            name: 'offline'
        }, function (ret, err) {
            opennowifi()
        });
        var vm = new Vue({
            el: "#wrap",
            data: {
                remnant: 0,
                bio:'',
                biotitle:'',
                yuelist: [],

            },
            mounted: function () {
                var that = this;
                this.getyue()
                this.getrefUserinfo()
            },
            methods: {
                // 弹出交友目的
                setpurpose: function () {
                    var that = this;
                    var picker = new mui.PopPicker();
                    picker.setData(that.yuelist)
                    picker.pickers[0].setSelectedValue('0', 2000);
                    picker.show(function (SelectedItem) {
                        that.bio = SelectedItem[0].value
                        that.biotitle = SelectedItem[0].text
                    })
                },
                // 获取交友目的列表
                getyue: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.yue, {
                        data: {
                            values: {
                                token: token,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            var data = res.data
                            that.yuelist = []
                            Object.keys(data).forEach(function (key) {
                                var datas = {}
                                datas.text = data[key]
                                datas.value = data[key]
                                that.yuelist.push(datas)
                            })
                            console.log(that.yuelist);
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                descInput: function () {
                    var txtVal = this.bio.length;
                    this.remnant = 300 - txtVal;
                },
                toLogin: function () {
                    console.log('logins')
                    if (api.systemType == "ios") {
                        var times = 0;
                    } else {
                        var times = 300;
                    }
                    api.openWin({ //未登录打开登陆窗口
                        name: 'login',
                        url: 'widget://html/login/login.html',
                        delay: 0,
                        slidBackType: 'edge',
                        vScrollBarEnabled: false,
                        slidBackEnabled: false,
                    })
                },
                getrefUserinfo: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.center,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.hideProgress();
                            that.bio = res.data.bio
                            console.log(that.bio);
                        } else {
                            api.hideProgress();
                            $api.rmStorage('userInfo')
                            $api.rmStorage('token')
                            that.toLogin();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                sub: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.biosave,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                bio:that.bio
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.hideProgress();
                            api.toast({msg: '更新成功', location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
            },
            filters: {
                getTel: function (value) {
                    var phone = value
                    return phone.substr(0, 3) + "****" + phone.substr(7)
                },
                getCard: function (value) {
                    var phone = value
                    return phone.substr(0, 5) + "********" + phone.substr(12)
                },
                filtersImg: function (img) {
                    var imgs = ajaxUrl + '/' + img
                    return imgs;
                },
                getchecked: function (e) {
                    var checked = ''
                    if (e == 0) {
                        checked = '审核中'
                    } else {
                        checked = '已审核'
                    }
                    return checked
                }
            }
        })
    }
</script>
